<template>
  <el-container>
    <el-header class="mianbaoxie">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="man-el">
        <el-breadcrumb-item :to="{ path: '/home/insurance/baoxian' }"
          >保险公司管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>添加保险公司</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <el-form
        :model="input5"
        label-width="130px"
        class="demo-ruleForm"
        :inline="true"
      >
        <el-form-item
          label="用户姓名"
          prop="input1"
          :rules="[{ required: true, message: '姓名不能为空' }]"
          class="xinqi"
        >
          <el-input
            v-model.number="input5.input1"
            autocomplete="off"
            class="inpuy"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          prop="input2"
          :rules="[
            { required: true, message: '手机号码不能为空' },
            { type: 'number', message: '手机号必须为数字值' },
          ]"
          class="xinqi"
        >
          <el-input
            v-model.number="input5.input2"
            autocomplete="off"
            class="inpuy"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="车牌号"
          prop="input3"
          :rules="[{ required: true, message: '车牌号不能为空' }]"
          class="xinqi"
        >
          <el-input
            v-model.number="input5.input3"
            autocomplete="off"
            class="inpuy"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="公司名称"
          prop="region"
          
          class="xinqi"
        >
          <el-select
            v-model="input5.region"
            placeholder="请选择公司"
            class="select inpuy"
          >
              <el-option  v-for="item in appp" :key="item.id" :label="item.companyName" :value="item.id"></el-option>
           
            
          </el-select>

          <div>
            <el-input
              v-if="tianjbaox"
              v-model="input5.ziding"
              class="inpuy"
              placeholder="请输入公司名称"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="行驶证车主姓名" prop="input4" class="xinqi">
          <el-input
            v-model.number="input5.input4"
            autocomplete="off"
            class="inpuy"
          ></el-input>
        </el-form-item>
        <el-form-item label="车辆识别代码" prop="input5" class="xinqi">
          <el-input
            v-model.number="input5.input5"
            autocomplete="off"
            class="inpuy"
          ></el-input>
        </el-form-item>
        <el-form-item label="车辆发动机号" prop="input6" class="xinqi">
          <el-input
            v-model.number="input5.input6"
            autocomplete="off"
            class="inpuy"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="持卡人"
          prop="input7"
          :rules="[{ required: true, message: '持卡人不能为空' }]"
          class="xinqi"
        >
          <el-input
            v-model.number="input5.input7"
            autocomplete="off"
            class="inpuy"
          ></el-input>
        </el-form-item>

        <el-form-item label="车主身份证号" prop="input8" class="xinqi">
          <el-input
            v-model.number="input5.input8"
            autocomplete="off"
            class="inpuy"
          ></el-input>
        </el-form-item>
        <el-form-item label="交强险" prop="jiaoqiang" class="xinqi">
          <el-select
            v-model="input5.jiaoqiang"
            placeholder="请选择保额(元)"
            class="select inpuy"
          >
            <el-option label="1000" value=1000></el-option>
            <el-option label="2000" value=2000></el-option>
            <el-option label="3000" value=3000></el-option>
            <el-option label="4000" value=4000></el-option>
            <el-option label="5000" value=5000></el-option>
            <el-option label="6000" value=6000></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="交强保费金额"
          prop="inputs"
          :rules="[
            { required: true, message: '保费金额不能为空' },
            { required: true, message: '保费金额不能为空' },
          ]"
          class="xinqi"
        >
          <el-input
            placeholder="请输入保费金额"
            v-model="input5.inputs"
            class="inpuy"
          ></el-input>
           <div class="baofei" v-if="tianjaxunh">
            <span>保费金额不能>=保额</span>
          </div>
        </el-form-item>
        <el-form-item label="车辆损失险" prop="cheliang" class="xinqi">
          <el-select
            v-model="input5.cheliang"
            placeholder="请选择保额(元)"
            class="select inpuy"
          >
            <el-option label="1000" value=1000></el-option>
            <el-option label="2000" value=2000></el-option>
            <el-option label="3000" value=3000></el-option>
            <el-option label="4000" value=4000></el-option>
            <el-option label="5000" value=5000></el-option>
            <el-option label="6000" value=6000></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="车辆保费金额"
          prop="input9"
          :rules="[
            { required: true, message: '保费金额不能为空' },
            { required: true, message: '保费金额不能为空' },
          ]"
          class="xinqi"
        >
          <el-input
            placeholder="请输入保费金额"
            v-model="input5.input9"
            class="inpuy"
          ></el-input>
           <div class="baofei" v-if="tianjaxuns">
            <span>保费金额不能>=保额</span>
          </div>
        </el-form-item>
        <el-form-item label="第三责任险" prop="disan" class="xinqi">
          <el-select
            v-model="input5.disan"
            placeholder="请选择保额(元)"
            class="select inpuy"
          >
            <el-option label="1000" value=1000></el-option>
            <el-option label="2000" value=2000></el-option>
            <el-option label="3000" value=3000></el-option>
            <el-option label="4000" value=4000></el-option>
            <el-option label="5000" value=5000></el-option>
            <el-option label="6000" value=6000></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车型" prop="chexingaid" class="xinqi">
          <el-select
            v-model="input5.chexingaid"
            placeholder="请选择车型"
            class="select inpuy"
          >
            <el-option  v-for="item in chaopao" :key="item.id" :label="item.name" :value="item.id"></el-option>
           
          </el-select>
        </el-form-item>
        <el-form-item
          label="第三保费金额"
          prop="input10"
          :rules="[
            { required: true, message: '保费金额不能为空' },
            { required: true, message: '保费金额不能为空' },
          ]"
          class="xinqi"
        >
          <el-input
            placeholder="请输入保费金额"
            v-model="input5.input10"
            class="inpuy"
          ></el-input>
          <div class="baofei" v-if="tianjaxun">
            <span>保费金额不能>=保额</span>
          </div>
        </el-form-item>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
           :auto-upload="false"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
           :on-change="handleChange"
           class="uplod"
        >
          <i class="el-icon-plus  "></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>

        <el-form-item class="item2">
          <el-button
            type="primary"
            @click="submitForm('numberValidateForm')"
            class="button"
            >保存</el-button
          >
          <el-button @click="resetForm('numberValidateForm')" class="button"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      aaaa:'',
      baoxian: false,
      baofei: false,
       dialogImageUrl: '',
      dialogVisible: false,
       url:'',
       appp:[],
       chaopao:[],
      input5: {
        uplod: "",
        chexingaid: "",
        region: "", //公司名称
        ziding: "", //当选择自定义的时候可以输入这个
        input1: "", //用户姓名
        input2: "", //手机号码
        input3: "", //车牌号
        input4: "", //行驶证车主姓名
        input5: "", //车辆识别代码
        input6: "", //车辆发动机号
        input7: "", //车卡人
        input8: "", //车主身份证号
        jiaoqiang: "", //交强险
        inputs: "", //请输入交强险的保费金额
        cheliang: "", //车辆损失险
        input9: "", //车辆损失险的保费金额
        disan: "", //第三责任险
        input10: '', //第三责任险的保费金额

        //
      },
    };
  },

  computed: {
    tianjbaox() {
      return this.input5.region == "11" ? !this.baoxian : this.baoxian;
    },
    tianjaxun(){
      if(this.input5.disan==''){
        return
      }
      if(this.input5.disan==''&&this.input5.input10==0 ){
        return
      }
      if(!this.input5.disan==''&& this.input5.input10=='' ){
        return
      }
      // return this.input5.disan <= this.input5.input10 ? !this.baofei : this.baofei;
      if(Number(this.input5.disan) <= Number(this.input5.input10)){
        return !this.baofei
      }else{
         return this.baofei
      }
    },
    tianjaxuns(){
      if(this.input5.cheliang==''){
        return
      }
      if(this.input5.cheliang==''&&this.input5.input9==0 ){
        return
      }
      if(!this.input5.cheliang==''&& this.input5.input9=='' ){
        return
      }
      // return this.input5.disan <= this.input5.input10 ? !this.baofei : this.baofei;
      if(Number(this.input5.cheliang) <= Number(this.input5.input9)){
        return !this.baofei
      }else{
         return this.baofei
      }
    },

    tianjaxunh(){
      if(this.input5.jiaoqiang==''){
        return
      }
      if(this.input5.jiaoqiang==''&&this.input5.inputs==0 ){
        return
      }
      if(!this.input5.jiaoqiang==''&& this.input5.inputs=='' ){
        return
      }
      // return this.input5.disan <= this.input5.input10 ? !this.baofei : this.baofei;
      if(Number(this.input5.jiaoqiang) <= Number(this.input5.inputs)){
        return !this.baofei
      }else{
         return this.baofei
      }
    },
    regions(){
        if(this.input5.region=='11' ){
          return this.ziding 
        } else{
          return  this.input5.region
        }
      
    }

  },
  created() {
    this.$axios({
      url:'/insuranceCompanyManagement/list',
      method:"post"
    }).then(res=>{
      console.log(res);
      if(res.data.code==0){
this.appp=res.data.data
this.appp.forEach(item => {
   this.aaaa=item.id
});


      }
    });
    this.$axios({
      url:"/carBrand/findAll",
      method:'get'
    }).then(res=>{
      console.log(res);
      if(res.data.code==0){
this.chaopao=res.data.data
      }
    })
  },

  methods: {
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handleChange(file){
         console.log(file.raw);
         let formData=new FormData()
         formData.append('file',file.raw)
         this.$axios({
          url:'/upload',
          method:'post',
          data:{
            'image':formData.get('file')
          },
          headers:{
            'Content-Type': 'multipart/form-data',
            'Accept': 'application/json'
          }
         })
         .then(res=>{
          console.log(res);
          if(res.data.code==0){
            this.url=res.data.data
          }
         })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    //保存添加保险公司
    submitForm() {
      console.log(this.input5.region);
   
      // console.log(this.input5.disan);
    //  this.input5.region=  this.input5.region==11 ? this.input5.ziding : this.input5.region
    //   console.log(this.input5.region);
      this.$axios({
        url: "/insuranceCompanyManagement/add",
        method: "post",
        data: {
          carBrandId: this.input5.chexingaid,
          carNumber: this.input5.input3,
          cardholeder: this.input5.input7,
          cname: this.input5.input1,
          commercialpricecost:  Number(this.input5.input9) , //商业险保费
          commercialpricepay:Number( this.input5.cheliang),//商业险保额
          cphone: this.input5.input2,
          damageInsurancecost: Number(this.input5.input9) , //
          damageInsurancepay:  Number(this.input5.cheliang,) ,
          drivingLicenseName: this.input5.input4,

          idCar: this.input5.input8,
          
          insuranceCompanyManagementId:this.input5.region,
          mandatorypricecost: Number(this.input5.inputs) ,
          mandatorypricepay:  Number( this.input5.jiaoqiang),
          thirdInsurancecost: Number(this.input5.input10,) ,
          thirdInsurancepay:  Number(this.input5.disan,) ,
          vehicleEngineNum: this.input5.input6,
          vehicleIdentificationCode: this.input5.input5,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          alert("添加成功");
          this.$router.push("/home/insurance/baoxian");
        }
      });
    },
    //取消
    resetForm() {
      this.$router.push("/home/insurance/baoxian");
    },
  },
};
</script>

<style lang="less" scoped>
.uplod{
  float: right;
  position:fixed;
  top: 200px;
  right: 40px;
  background: rgba(9, 107, 61, 0.445);
  
}
.mianbaoxie {
  border-bottom: 1px solid #425877;
}
.man-el {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
}
.inpuy {
  width: 300px;
  height: 50px;
}
.baofei {
  color: red;
  font-size: 12px;
}

.item1 {
  float: right;
  margin-right: 20%;
}
.item2 {
  float: right;
  margin-top: 180px;
  margin-right: 5%;
}
.button {
  width: 150px;
  height: 50px;
}
.demo-ruleForm {
  text-align: left;
}
.upload-demo {
  float: right;
}
.xinqi {
  text-align: center;
  margin-bottom: 30px;
  height: 60px;
}
</style>